<template>
	<view class="nearby-store__goods-item e-p-t-20 e-p-b-20 e-rela">
		<view class="e-flex">
			<view :style="[imgStyle]">
				<load-image mode="aspectFill" :size="[imgSize]" :src="getProperty(info, goodsKeys.image)">
				</load-image>
			</view>
			<view class="nearby-store__goods-item__txt e-m-l-20 e-flex-1 e-flex-y  e-flex-items-start e-flex-between "
				:style="[{ height: textBoxSize }]">
				<view class=" c-34 e-p-r-20 nearby-store__goods-item-name" :class="[`e-line-${line}`]">
					{{ getProperty(info, goodsKeys.name) }}
				</view>
				<view class="nearby-store__goods-item__sku">
					<view class=" c-secondary e-font-24 e-m-b-8">
						{{ getProperty(info, goodsKeys.skuName) }}
					</view>
					<view class="c-red">
						<text class="e-font-20">{{ $unitEn }}</text>
						<text class="e-font-28">{{ getProperty(info, goodsKeys.price) || 0 }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="nearby-store__goods-item__btn e-abso e-flex">
			<text class="iconfont icon-jianshao  c-primary" :class="[`e-font-${iconSize}`]" @tap="sub"></text>
			<view class="c-666 e-m-l-20 e-m-r-20">
				{{ number }}
			</view>
			<text class="iconfont icon-jiahao2fill c-primary" :class="[`e-font-${iconSize}`]" @tap="add"></text>
		</view>
	</view>
</template>
<script lang="ts">
	export default {
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用e-flex属性
		options: {
			virtualHost: true
		}
		// #endif
	}
</script>
<script setup lang="ts">
	import { computed } from 'vue'
	import {
		debounce,
		getProperty
	} from '@/common/utils'
	import type {StoreCartGoodsItem} from '@/common/reuqest/api'

	const props = withDefaults(defineProps<{
		imgSize : string
		textBoxSize : string
		info : StoreCartGoodsItem
		line : string
		iconSize : string,
		goodsKeys : {
			image : string
			skuName : string
			skuId : string
			price : string
			name : string
			qry : string
		}
		allowDel ?: boolean
	}>(), {
		allowDel: true
	})

	const emit = defineEmits(['numChange', 'del'])
	
	const numChange = debounce(function (v:number) {
		emit('numChange', v, props.info)
	},200)

	const number = computed({
		get() {
			return getProperty(props.info, props.goodsKeys.qry) || 0
		},
		set(v) {
			numChange(v)
		}
	})

	const imgStyle = computed(() => {
		return {
			width: props.imgSize,
			height: props.imgSize
		}
	})


	const add = () => {
		number.value++
	}
	const sub = () => {
		if (!props.allowDel && number.value === 1) return
		if (number.value === 1) {
			emit('del')
		}
		number.value--
	}
</script>

<style lang="scss" scoped>
	@import url('@/static/font/iconfont.css');

	.nearby-store__goods-item {
		&__txt {
			overflow: auto;
		}

		&-name {
			flex: 0 0 44rpx;
			height: 44rpx;
			line-height: 44rpx;
		}

		&__sku {
			padding-right: 140rpx;
		}

		&__btn {
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>